<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.insuranceProductsName"
        placeholder="机构名称搜索"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.planName"
        placeholder="计划名搜索"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-time-picker
        is-range
        v-model="times"
        class="filter-item"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 250px;"
        value-format="HH:mm:ss"
      />
      <el-select
        v-model="listQuery.enableStatus"
        clearable
        placeholder="状态"
        style="width: 200px;"
        class="filter-item"
      >
        <!-- <el-option :value="0" label="全部">全部</el-option> -->
        <el-option :value="0" label="启用">启用</el-option>
        <el-option :value="1" label="未启用">未启用</el-option>
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <br />
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新增
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="机构名称" class-name="status-col" width="200">
        <template slot-scope="{ row }">
          {{ row.insuranceProductsName }}
        </template>
      </el-table-column>
      <el-table-column label="计划名称" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.planName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" min-width="80" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" min-width="80" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投放预算数量" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.exposureBudget }}</span>
        </template>
      </el-table-column>
      <el-table-column label="每日投放预算数量" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.dayQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当日已投放数量" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.dayToExposeNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投放渠道" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.launchChannel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已投放预算数量" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.toExposeNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="启用状态"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.limitSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeVisitStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="展示状态"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.dStatus"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changedStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="api二次分发开关"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.redistributeSwitch2"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeRedistributeStatus(row, 'redistributeSwitch')"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="手机号在网状态校验开关"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.checkOnlineSwitch2"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeRedistributeStatus(row, 'checkOnlineSwitch')"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="手机号二要素校验开关"
        align="center"
        min-width="120"
        class-name="small-padding"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.twoFactorSwitch2"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            align="center"
            @change="changeRedistributeStatus(row, 'twoFactorSwitch')"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="360">
        <template slot-scope="{ row }">
          <el-button type="info" size="mini" @click="filterConfiguration(row)">
            过滤器配置
          </el-button>
          <el-button type="info" size="mini" @click="cityConfigure(row)">
            城市配置
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="warning" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getChannelDevice"
    />

    <el-dialog :visible.sync="dialogVisible" title="新增广告计划">
      <el-form ref="planData" :model="planData" label-width="100px">
        <el-form-item label="机构名称">
          <el-select
            v-model="planData.insuranceProductsName"
            clearable
            placeholder="请选择"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.userName"
              :label="item.userName"
              @click.native="getSelect1(item)"
            >
              {{ item.userName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="planData.planName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <!-- <el-input v-model="form.startTime" style="width: 370px;" /> -->
          <el-time-select
            v-model="planData.startTime"
            placeholder="开始时间"
            :picker-options="{
              start: '00:00',
              step: '00:10',
              end: '23:30'
            }"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-select
            v-model="planData.endTime"
            placeholder="结束时间"
            :picker-options="{
              start: planData.startTime,
              step: '00:01',
              end: '23:59',
              minTime: planData.startTime
            }"
          />
        </el-form-item>
        <el-form-item label="预算数量">
          <el-input v-model="planData.exposureBudget"></el-input>
        </el-form-item>
        <el-form-item label="每日预算数量">
          <el-input v-model="planData.dayQuantity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" title="编辑广告计划">
      <el-form ref="planData" :model="planData1" label-width="100px">
        <el-form-item label="机构名称">
          <el-select
            v-model="planData1.insuranceProductsName"
            clearable
            placeholder="请选择"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.userName"
              :label="item.userName"
              @click.native="getSelect(item)"
            >
              {{ item.userName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="planData1.planName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <!-- <el-input v-model="form.startTime" style="width: 370px;" /> -->
          <el-time-select
            v-model="planData1.startTime"
            placeholder="开始时间"
            :picker-options="{
              start: '00:00',
              step: '00:10',
              end: '23:30'
            }"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <!-- <el-input v-model="form.endTime" style="width: 370px;" /> -->
          <el-time-select
            v-model="planData1.endTime"
            placeholder="结束时间"
            :picker-options="{
              start: planData1.startTime,
              step: '00:01',
              end: '23:59',
              minTime: planData1.startTime
            }"
          />
        </el-form-item>
        <el-form-item label="预算数量">
          <el-input v-model="planData1.exposureBudget"></el-input>
        </el-form-item>
        <el-form-item label="每日预算数量">
          <el-input v-model="planData1.dayQuantity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible2" title="过滤器配置">
      <el-form :model="glData" label-width="100px">
        <el-form-item label="必选条件">
          <el-select
            v-model="glData.requiredCondition"
            clearable
            placeholder="请选择"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option label="有公积金" value="有公积金"></el-option>
            <el-option label="有保险" value="有保险"></el-option>
            <el-option label="有房" value="有房"></el-option>
            <el-option label="有车" value="有车"></el-option>
            <el-option label="私营企业主" value="私营企业主"></el-option>
            <el-option label="有白条" value="有白条"></el-option>
            <el-option label="有花呗" value="有花呗"></el-option>
            <el-option label="全部无" value="全部无"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满足条件">
          <el-radio-group v-model="meetConditions" size="medium">
            <el-radio border label="全部不匹配"></el-radio>
            <el-radio border label="满足全部条件"></el-radio>
            <el-radio border label="满足其一条件"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div>
          <div style="margin-left:30px">
            说明：<br />
            1. 全部不匹配：不进行匹配，什么用户信息都要<br />
            2. 满足全部条件：满足所有所选条件，才会匹配成功<br />
            3. 满足其一条件：满足多项资产的一个就匹配成功（仅可选择个人资产）<br />
            4.
            如果选择了必选条件，那么除了必选条件，剩余的资产按照满足条件进行匹配<br />
            （必选条件仅可选择个人资产下面依然要选择必选条件，）<br /><br />
          </div>
        </div>
        <el-form-item label="借款额度">
          <el-checkbox-group v-model="loanLimit">
            <el-checkbox-button
              label="5万"
              name="loanLimit"
            ></el-checkbox-button>
            <el-checkbox-button
              label="10万"
              name="loanLimit"
            ></el-checkbox-button>
            <el-checkbox-button
              label="20万"
              name="loanLimit"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="芝麻分">
          <el-checkbox-group v-model="sesameSeed">
            <el-checkbox-button
              label="600分以下"
              name="sesameSeed"
            ></el-checkbox-button>
            <el-checkbox-button
              label="600到649分"
              name="sesameSeed"
            ></el-checkbox-button>
            <el-checkbox-button
              label="650到699分"
              name="sesameSeed"
            ></el-checkbox-button>
            <el-checkbox-button
              label="700分以上"
              name="sesameSeed"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="逾期情况">
          <el-checkbox-group v-model="overdueSituation">
            <el-checkbox-button
              label="当前有逾期"
              name="overdueSituation"
            ></el-checkbox-button>
            <el-checkbox-button
              label="无逾期"
              name="overdueSituation"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-input
            placeholder="最小年龄"
            type="number"
            style="width:150px"
            v-model="glData.minAge"
          ></el-input
          >&nbsp;&nbsp; 到&nbsp;&nbsp;
          <el-input
            type="number"
            placeholder="最大年龄"
            style="width:200px"
            v-model="glData.maxAge"
          ></el-input>
        </el-form-item>
        <el-form-item label="个人资产">
          <el-checkbox-group v-model="personalAssets">
            <el-checkbox-button
              label="有公积金"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有保险"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有房"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有车"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="私营企业主"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有白条"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有花呗"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="本科"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有社保"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="有信用卡"
              name="personalAssets"
            ></el-checkbox-button>
            <el-checkbox-button
              label="全部无"
              name="personalAssets"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="投放渠道">
          <el-button type="primary" @click="channelSelect()"
            >选择渠道</el-button
          >
        </el-form-item>
        <el-form-item label="">
          <div style="display:flex;flex-wrap:wrap">
            <div v-for="(item, index) in launchChannel" :key="index">
              <el-tag v-if="item != ''" style="margin-right:10px">{{
                item
              }}</el-tag>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">
          取消
        </el-button>
        <el-button type="primary" @click="filterSubmit()">
          确认
        </el-button>
      </div>
      <el-dialog
        title="渠道配置"
        :visible.sync="innerVisible"
        width="70%"
        append-to-body
        :before-close="cancelChannel"
      >
        <div>
          <el-select
            v-model="channelData.type"
            filterable
            :filter-method="dataFilter"
            placeholder="选择类型"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="channelSelect"
          >
            <el-option :value="1" label="同业">同业</el-option>
            <el-option :value="2" label="信息流">信息流</el-option>
            <el-option value="" label="全部">全部</el-option>
          </el-select>
          <el-input
            v-model="channelData.nickname"
            clearable
            placeholder="输入渠道名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="channelSelect"
          />

          <el-button
            class="filter-item"
            type="success"
            icon="el-icon-search"
            @click="channelSelect"
            >搜索</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          v-loading="loading2"
          :data="tableData1"
          style="width: 100%;"
          :row-key="bindRowkeys"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="渠道ID" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="渠道名称" class-name="status-col">
            <template slot-scope="{ row }">
              {{ row.nickname }}
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.state == 0" type="danger">禁用</el-tag>
              <el-tag v-if="row.state == 1" type="success">启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="渠道签名"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <span>{{ row.sign }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="类型"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.type == 1" type="primary">同业</el-tag>
              <el-tag v-if="row.type == 2" type="primary">信息流</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          ></el-table-column>
        </el-table>
        <pagination
          v-show="total3 > 0"
          :total="total3"
          :page.sync="channelData.current"
          :limit.sync="channelData.size"
          @pagination="channelSelect"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelChannel()">取 消</el-button>
          <el-button type="primary" @click="channelSubmit()">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible4"
      title="单价配置"
      top="40vh"
      width="400px"
      center
    >
      开通城市单价
      <el-input
        v-model="price"
        clearable
        size="small"
        placeholder="输入单价"
        style="width: 200px;"
        class="filter-item"
        type="number"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">
          取消
        </el-button>
        <el-button type="primary" @click="addProduct()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible3" title="城市配置">
      <div>
        <div>
          未开通城市：
          <el-input
            v-model="zdNationalCityDTO.provinceName"
            clearable
            size="small"
            placeholder="输入省名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />
          <el-input
            v-model="zdNationalCityDTO.cityName"
            clearable
            size="small"
            placeholder="输入城市名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="toQuery"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-warning-outline"
            size="small"
            @click="open()"
            >一键屏蔽</el-button
          >
        </div>

        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading"
          :data="allCity"
          style="width: 100%;"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="200" />
          <el-table-column prop="provinceCode" label="省编码" />
          <el-table-column prop="provinceName" label="省" />
          <el-table-column prop="cityCode" label="城市编码" />
          <el-table-column prop="cityName" label="城市" />
          <!--   编辑与删除   -->
          <el-table-column
            label="操作"
            width="130px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-left: 3px"
                type="text"
                size="mini"
                @click="addPrice(scope.row)"
                >开通</el-button
              >
              <el-button
                style="margin-left: 3px"
                v-if="scope.row.cityCode != '100000'"
                type="text"
                size="mini"
                @click="shieldProduct(scope.row)"
                >屏蔽</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total1 > 0"
          :total="total1"
          :page.sync="zdNationalCityDTO.current"
          :limit.sync="zdNationalCityDTO.size"
          @pagination="toQuery"
        />
      </div>
      <div class="head-container">
        <div class="app2">
          已开通城市：
          <el-input
            v-model="zdAdvertisingPlanDTO.provinceName"
            clearable
            size="small"
            placeholder="输入省份名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery2"
          />
          <el-input
            v-model="zdAdvertisingPlanDTO.cityName"
            clearable
            size="small"
            placeholder="输入城市名称搜索"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="toQuery2"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="toQuery2"
            >搜索</el-button
          >
        </div>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading2"
          :data="citys"
          style="width: 100%;"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="cityCode" label="城市代码" />
          <el-table-column prop="provinceName" label="省份名称" />
          <el-table-column prop="cityName" label="城市名称" />
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="category" label="类型" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.status == 1">屏蔽</el-tag>
              <el-tag v-else>开通</el-tag>
            </template>
          </el-table-column>
          <!--   编辑与删除   -->
          <el-table-column
            label="操作"
            width="130px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- <el-button style="margin-left: 3px" type="text" size="mini" @click="delProduct(scope.row)">编辑</el-button> -->
              <el-button
                style="margin-left: 3px"
                type="text"
                size="mini"
                @click="delProduct(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
      </div>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="zdAdvertisingPlanDTO.current"
        :limit.sync="zdAdvertisingPlanDTO.size"
        @pagination="toQuery2"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  advertisingPlan,
  advertisingAdd,
  getList,
  advertisingUpdate,
  advertisingDelete,
  filterConfiguration,
  updateAEnableStatus,
  channelConfiguration
} from '@/api/advertising';
import { getChannelList } from '@/api/channel';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import {
  findAllCity,
  findCitys,
  addPlanCity,
  delPlanCity,
  getCityCountByCityName,
  shiledOnce
} from '@/api/advertising';
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      countPhone: { total: 999 },
      tableData: [],
      tableData1: [],
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        enableStatus: '',
        endTime: '',
        planName: '',
        size: 10,
        startTime: '',
        type: '',
        insuranceProductsName: ''
      },
      times: null,
      dialogStatus: '',
      selectArr: '',
      planData: {
        endTime: '',
        exposureBudget: 0,
        id: 0,
        insuranceProductsId: 0,
        insuranceProductsName: '',
        planDate: '',
        planName: '',
        startTime: '',
        dayQuantity: 0
      },
      loanLimit: [],
      sesameSeed: [],
      overdueSituation: [],
      personalAssets: [],
      meetConditions: '',
      glData: {
        id: 0,
        meetConditions: 0,
        personalAssets: '',
        loanLimit: '',
        requiredCondition: '',
        sesameSeed: '',
        minAge: 0,
        maxAge: 100,
        overdueSituation: ''
      },
      planData1: {
        endTime: '',
        exposureBudget: 0,
        id: 0,
        insuranceProductsName: '',
        planDate: '',
        planName: '',
        startTime: '',
        dayQuantity: 0
      },
      planData2: {
        id: 0,
        enableStatus: 0
      },
      downloadLoading: false,
      listLoading: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      innerVisible: false,
      listQuery1: {
        avatar: '',
        current: 1,
        nickName: '',
        password: '',
        phonenumber: '',
        remark: '',
        size: 999,
        state: '',
        userName: ''
      },
      zdAdvertisingPlanDTO: {
        current: 1,
        size: 10,
        planId: '',
        provinceName: '',
        cityName: ''
      },
      zdNationalCityDTO: {
        planId: 0,
        current: 1,
        size: 10,
        provinceName: '',
        cityName: ''
      },
      cityData: {},
      price: '',
      allCity: [],
      citys: [],
      multipleSelection: [],
      channelData: {
        current: 1,
        size: 10,
        state: 1,
        type: '',
        nickname: ''
      },
      allId: '',
      launchChannel: [],
      launchChannelIds: [],
      multipleIds: []
    };
  },
  created() {
    this.getChannelDevice(this.listQuery);
  },
  watch: {
    tableData1(val) {
      this.$nextTick(() => {
        val.forEach(item => {
          if (this.launchChannelIds) {
            this.launchChannelIds.forEach(atem => {
              if (item.id === atem) {
                this.$refs.multipleTable.toggleRowSelection(item, true);
              }
            });
          }
        });
      });
    }
  },
  methods: {
    // 获取用户列表
    async getChannelDevice(listQuery) {
      const res = await advertisingPlan(this.listQuery);
      res.data.data.records.forEach(element => {
        element.limitSwitch = element.enableStatus === 0;
        element.dStatus = element.displayStatus === 0;
        element.redistributeSwitch2 = element.redistributeSwitch === 1;
        element.checkOnlineSwitch2 = element.checkOnlineSwitch === 1;
        element.twoFactorSwitch2 = element.twoFactorSwitch === 1;
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    bindRowkeys(row) {
      return row.id;
    },
    async channelSelect() {
      this.innerVisible = true;
      const res = await getChannelList(this.channelData);
      this.tableData1 = res.data.data.records;
      this.total3 = res.data.data.total;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection) {
        let ids = [];
        this.multipleSelection.forEach(item => {
          ids.push(item.id);
        });
        this.allId = ids.join(',');
      }
    },
    cancelChannel() {
      this.innerVisible = false;
      this.$refs.multipleTable.clearSelection();
    },
    channelSubmit() {
      let Data = {
        launchChannelId: this.allId,
        id: this.glData.id
      };
      channelConfiguration(Data).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '添加渠道成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
          this.innerVisible = false;
          this.filterSubmit();
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    changedStatus(row) {
      this.planData2 = row;
      if (this.planData2.enableStatus == 0) {
        if (this.planData2.dStatus) {
          this.planData2.displayStatus = 0;
        } else {
          this.planData2.displayStatus = 1;
        }
        advertisingUpdate(this.planData2).then(res => {
          if (res.data.code === 200) {
            this.$notify({
              title: 'Success',
              message: '更新成功',
              type: 'success',
              duration: 2000
            });
            this.getChannelDevice(this.listQuery);
          } else {
            this.$notify({
              title: 'fail',
              message: '更新失败',
              type: 'fail',
              duration: 2000
            });
          }
        });
      } else {
        this.getChannelDevice(this.listQuery);
        this.$notify({
          title: 'fail',
          message: '更新失败',
          type: 'fail',
          duration: 2000
        });
      }
    },
    changeVisitStatus(row) {
      this.planData2 = row;
      if (this.planData2.limitSwitch) {
        this.planData2.enableStatus = 0;
      } else {
        this.planData2.enableStatus = 1;
      }
      updateAEnableStatus(this.planData2).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    changeRedistributeStatus(row, type) {
      this.planData2 = row;
      console.log(
        row.redistributeSwitch,
        row.checkOnlineSwitch,
        row.twoFactorSwitch
      );
      this.planData2.redistributeSwitch = this.planData2.redistributeSwitch2
        ? 1
        : 0;
      this.planData2.checkOnlineSwitch = this.planData2.checkOnlineSwitch2
        ? 1
        : 0;
      this.planData2.twoFactorSwitch = this.planData2.twoFactorSwitch2 ? 1 : 0;
      console.log(this.planData2.checkOnlineSwitch, type, this.planData2);
      updateAEnableStatus(this.planData2).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    async cityConfigure(row) {
      this.dialogVisible3 = true;
      this.zdNationalCityDTO.planId = row.id;
      const res = await findAllCity(this.zdNationalCityDTO);
      this.allCity = res.data.data.records;
      this.zdAdvertisingPlanDTO.planId = row.id;
      this.total1 = res.data.data.total;
      const res1 = await findCitys(this.zdAdvertisingPlanDTO);
      this.citys = res1.data.data.records;
      this.total2 = res1.data.data.total;
    },
    delProduct(data) {
      delPlanCity({ id: data.id })
        .then(res => {
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    toQuery() {
      findAllCity(this.zdNationalCityDTO)
        .then(res => {
          this.allCity = res.data.data.records;
          this.total1 = res.data.data.total;
        })
        .catch(() => {
          //
        });
    },
    toQuery2() {
      findCitys(this.zdAdvertisingPlanDTO)
        .then(res => {
          this.citys = res.data.data.records;
          this.total2 = res.data.data.total;
        })
        .catch(() => {
          //
        });
    },
    addPrice(data) {
      this.price = '';
      this.dialogVisible4 = true;
      const dataForm = {
        planId: this.zdAdvertisingPlanDTO.planId,
        provinceName: data.provinceName,
        cityName: data.cityName,
        cityCode: data.cityCode,
        category: false,
        status: 0,
        type: 1,
        price: this.price
      };
      this.cityData = dataForm;
    },
    addProduct() {
      this.cityData.price = this.price;
      addPlanCity(this.cityData)
        .then(res => {
          this.dialogVisible4 = false;
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {});
    },
    shieldProduct(data) {
      const dataForm = {
        planId: this.zdAdvertisingPlanDTO.planId,
        provinceName: data.provinceName,
        cityName: data.cityName,
        cityCode: data.cityCode,
        category: false,
        status: 1,
        type: 1
      };
      addPlanCity(dataForm)
        .then(res => {
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    filterConfiguration(row) {
      this.meetConditions = '';
      this.personalAssets = [];
      this.sesameSeed = [];
      this.overdueSituation = [];
      this.launchChannel = row.launchChannel.split(',');
      this.launchChannelIds = row.launchChannelIds;
      this.dialogVisible2 = true;
      this.glData.minAge = row.minAge;
      this.glData.maxAge = row.maxAge;
      this.glData.id = row.id;
      this.glData.requiredCondition = row.requiredCondition;
      if (row.meetConditions === 1) {
        this.meetConditions = '全部不匹配';
      }
      if (row.meetConditions === 2) {
        this.meetConditions = '满足全部条件';
      }
      if (row.meetConditions === 3) {
        this.meetConditions = '满足其一条件';
      }
      this.glData.loanLimit = row.loanLimit;
      this.glData.sesameSeed = row.sesameSeed;
      this.glData.overdueSituation = row.overdueSituation;
      if (row.personalAssets != null) {
        this.personalAssets = row.personalAssets.split(',');
      }
      if (row.loanLimit != null) {
        this.loanLimit = row.loanLimit.split(',');
      }
      if (row.sesameSeed != null) {
        this.sesameSeed = row.sesameSeed.split(',');
      }
      if (row.overdueSituation != null) {
        this.overdueSituation = row.overdueSituation.split(',');
      }
    },
    filterSubmit() {
      if (this.meetConditions === '全部不匹配') {
        this.glData.meetConditions = 1;
      }
      if (this.meetConditions === '满足全部条件') {
        this.glData.meetConditions = 2;
      }
      if (this.meetConditions === '满足其一条件') {
        this.glData.meetConditions = 3;
      }
      this.glData.personalAssets = this.personalAssets.toString();
      if (this.glData.personalAssets.substr(0, 1) === ',') {
        this.glData.personalAssets = this.glData.personalAssets.substr(1);
      }
      this.glData.sesameSeed = this.sesameSeed.join(',');
      this.glData.overdueSituation = this.overdueSituation.join(',');
      this.glData.loanLimit = this.loanLimit.join(',');
      this.glData.minAge = +this.glData.minAge;
      this.glData.maxAge = +this.glData.maxAge;
      filterConfiguration(this.glData).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '新增成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogVisible2 = false;
      });
    },
    getSelect(val) {
      this.planData1.insuranceProductsId = val.userId;
      this.planData1.insuranceProductsName = val.userName;
    },
    getSelect1(val) {
      this.planData.insuranceProductsId = val.userId;
      this.planData.insuranceProductsName = val.userName;
    },
    handleUpdate(row) {
      this.dialogVisible1 = true;
      getList(this.listQuery1).then(res => {
        if (res.data.code === 200) {
          this.selectArr = res.data.data.records;
        }
      });
      this.planData1.insuranceProductsName = row.insuranceProductsName;
      this.planData1.planName = row.planName;
      this.planData1.startTime = row.startTime;
      this.planData1.endTime = row.endTime;
      this.planData1.exposureBudget = row.exposureBudget;
      this.planData1.dayQuantity = row.dayQuantity;
      this.planData1.id = row.id;
    },
    handleCreate() {
      this.dialogVisible = true;
      getList(this.listQuery1).then(res => {
        if (res.data.code === 200) {
          this.selectArr = res.data.data.records;
        } else {
          this.$notify({
            title: '业务提示',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    cancel() {
      (this.dialogVisible = false),
        (this.planData.planName = ''),
        (this.planData.insuranceProductsName = ''),
        (this.planData.startTime = ''),
        (this.planData.endTime = ''),
        (this.planData.exposureBudget = '');
      this.planData.dayQuantity = '';
    },
    createData() {
      advertisingAdd(this.planData).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '新增成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
        this.planData.insuranceProductsName = '';
        this.planData.startTime = '';
        this.planData.endTime = '';
        this.planData.exposureBudget = '';
        this.planData.dayQuantity = '';
        this.planData.planName = '';
        this.dialogVisible = false;
      });
    },
    updateData() {
      advertisingUpdate(this.planData1).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '编辑成功',
            type: 'success',
            duration: 2000
          });
          this.getChannelDevice(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: res.data.msg,
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogVisible1 = false;
      });
    },
    handleDelete(row, index) {
      var that = this;
      this.$confirm('删除提示！', '确认删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        advertisingDelete({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            that.$notify({
              title: 'Success',
              message: '删除成功',
              type: 'success',
              duration: 2000
            });
            this.getChannelDevice(this.listQuery);
          } else {
            this.$notify({
              title: '错误',
              message: res.data.msg,
              type: 'fail',
              duration: 2000
            });
          }
        });
      });
    },
    handleFilter() {
      this.listQuery.current = 1;
      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      this.getChannelDevice(this.listQuery);
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    },
    // crm一键屏蔽
    shieldBatch() {
      const planId = this.zdAdvertisingPlanDTO.planId;
      const finalList = this.multipleIds.map(item => {
        item.type = 1;
        item.status = 1;
        item.category = false;
        item.planId = planId;
        return item;
      });
      shiledOnce({ finalList })
        .then(res => {
          this.$notify({
            title: '一键屏蔽成功',
            type: 'success',
            duration: 2500
          });
          this.toQuery();
          this.toQuery2();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    selectionChange(val) {
      this.multipleIds = val;
      if (this.multipleIds) {
        let ids = [];
        this.multipleIds.forEach(item => {
          ids.push(item.id);
        });
        this.allId = ids.join(',');
      }
    },
    open() {
      if (this.multipleIds.length === 0) {
        this.$message({
          type: 'error',
          message: '你还没有勾选城市',
          duration: 1000
        });
      } else {
        const cityName = this.zdNationalCityDTO.provinceName;
        getCityCountByCityName(cityName)
          .then(response => {
            this.$confirm(
              '共计' +
                this.multipleIds.length +
                '个城市,即将一键屏蔽，确认此操作吗？',
              '提示',
              {
                confirmButtonText: '确认屏蔽',
                cancelButtonText: '我再想想',
                type: 'warning',
                center: true
              }
            )
              .then(() => {
                console.log(1111);
                this.shieldBatch();
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消屏蔽'
                });
              });
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  }
};
</script>

<style scoped>
.el-checkbox-button {
  margin-right: 50px;
  margin-bottom: 20px;
  border: 1px solid rgb(204, 201, 201);
  border-radius: 5px;
}
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
